<template>
  <div class="rated">
    <div class="title">最受好评电影</div>
    <div class="wrapper">
      <div class="rated-wrap">
        <ListRatedItem
          v-for="item in ratedList"
          :key="item._id"
          :item="item"
        ></ListRatedItem>
      </div>
    </div>
  </div>
</template>

<script>
import ListRatedItem from "./ListRatedItem.vue";
import BScroll from "better-scroll";
import { mapActions, mapState } from "vuex";

export default {
  components: {
    ListRatedItem,
  },
  // computed: mapState(["ratedList"]),
  // computed: {
  //   ratedList() {
  //     return this.$store.state.index.ratedList;
  //   },
  // },
  computed: mapState({
    ratedList: (state) => state.index.ratedList,
  }),
  mounted() {
    this.getRatedListAsync().then(() => {
      new BScroll(".wrapper", {
        scrollX: true,
        scrollY: false,
        click: true,
      });
    });
  },
  methods: {
    ...mapActions("index", ["getRatedListAsync"]),
    // async getRatedList() {
    //   const res = await ratedApi();
    //   this.ratedList = res.result;
    //   await this.$nextTick();
    //   // 在数据请求结束以后(子元素渲染出来有宽度之后)才能添加bs
    //   // 第一个参数是容器的类名
    //   // 第二个参数是一个配置对象
    //   new BScroll(".wrapper", {
    //     scrollX: true,
    //     scrollY: false,
    //     click: true,
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.rated {
  width: 100%;
  height: 205px;
  background: #fff;
  padding: 12px 15px;
  margin-bottom: 10px;

  .title {
    font-size: 14px;
    color: #333;
    margin: 0 0 12px;
  }

  .wrapper {
    overflow: hidden;
  }

  .rated-wrap {
    // width: 345px;
    height: 150px;
    display: inline-flex;
    // overflow: auto;
    // display: inline;
  }
}
</style>
